<template>
    <div class="irregularGather">
        <dynamic-form :formDataList="formDataList" @getFormData='getFormData'></dynamic-form>
        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-upload2"
                        plain
                        @click='getBpddExport'
                        :disabled="tableList.length <= 0"
                    >
                        导出
                    </el-button>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'></pop-checkbox>
                </div>
            </template>
        </custom-setbtn>
        <tableList
            :tableGroup='tableGroup'
            :tableList='tableList'
            @getTableData='getTableData'
            :searchForm='formDataList.searchForm'
            ref='tableList'>
        </tableList>
    </div>
</template>

<script>
import dynamicForm from '@/components/dynamicForm'
import tableList from '../components/tableList.vue'
import { productColumns } from '@/api/customFieldController'
import {
    badProductDisDetail
} from '@/api/statisticsController'
export default {
    components: {
        dynamicForm,
        tableList
    },
    data() {
        return {
            // 表单列表
            formDataList: {
                formGroup: [
                    {
                        label: 'processCode',
                        name: '工单编号',
                        prop: '',
                        placeholder: '请填写',
                        key: 'srk'
                    },
                    {
                        label: 'productCode',
                        name: '产品编号',
                        prop: '',
                        placeholder: '请填写',
                        key: 'srk'
                    },
                    {
                        label: 'productName',
                        name: '产品名称',
                        prop: '',
                        placeholder: '请填写',
                        key: 'srk'
                    },
                    {
                        label: 'productSpecification',
                        name: '产品规格',
                        prop: '',
                        placeholder: '请填写',
                        key: '',
                        key: 'srk'
                    },
                    {
                        label: 'processCode',
                        name: '工序编号',
                        prop: '',
                        placeholder: '请填写',
                        key: 'srk'
                    },
                    {
                        label: 'processId',
                        name: '工序名称',
                        prop: '',
                        placeholder: '请填写',
                        key: 'sci',
                        dataUrl: {
                            url: '/base/process_other',
                            value: 'code',
                            chat:'-'
                        }
                    },
                    {
                        label: 'badProductId',
                        name: '不良品名称',
                        prop: '',
                        placeholder: '请选择',
                        key: 'sci',
                        dataUrl: {
                            url: '/base/bp_other',
                            value: 'id',
                            chat: '|'
                        }
                    },
                    {
                        label: 'produceUserId',
                        name: '生产人员',
                        prop: '',
                        placeholder: '请选择',
                        key: 'sci',
                        dataUrl: {
                            url: '/user/user_list_o',
                            value: 'id'
                        }
                    },
                    {
                        label: ['reportStartTimeStart', 'reportStartTimeEnd'],
                        name: '报工开始时间',
                        prop: '',
                        key: 'dpi'
                    },
                    {
                        label: ['reportEndTimeStart', 'reportEndTimeEnd'],
                        name: '报工结束时间',
                        prop: '',
                        placeholder: '请输入产品编号',
                        key: 'dpi'
                    },
                    {
                        label: ['actualStartTime' ,'actualEndTime'],
                        name: '实际报工时间',
                        prop: '',
                        key: 'dpi',
                        defaultTime: true
                    },
                    {
                        label: 'type',
                        name: '维度汇总',
                        prop: '',
                        key: 'sel',
                        node: {
                            default: 0,
                            isRadio: true,
                            options: [
                                { value: 1, label: '工序' },
                                { value: 2, label: '生产人员' },
                                { value: 3, label: '工序 + 不良品项' },
                                { value: 4, label: '工序 + 生产人员' },
                                { value: 5, label: '产品 + 不良品项' },
                                { value: 6, label: '工序 + 生产人员 + 不良品项' },
                                { value: 7, label: '工单 + 产品 + 工序 + 不良品项' },
                                { value: 0, label: '全部' },
                            ]
                        }
                    },
                    
                ],
                searchForm: {
                    limit: 10,
                    page: 1,
                    type: 0
                },
                formSet: true
            },
            disposeGroup: [],
            tableGroup: [],
            // 表格数据
            tableList: [],
        }
    },
    mounted() {
        this.getProductColumns({type: 'irregularGather'})
            .then(()=>{
                this.getTableData(this.formDataList.searchForm)
            })
    },
    methods: {
        getProductColumns: async function(data){
            const res = await productColumns(data)
            if (res.code == 200) {
                this.disposeGroup = []
                this.tableGroup = []
                res.data.map((item, i) => {
                    const key = {
                        index:'80',
                        workOrderCode:'160',
                        productCode:'160',
                        productName:'130',
                        productSpecification:'70',
                        processCode:'160',
                        processName:'130',
                        produceName:'70',
                        reportStartTime:'145',
                        reportEndTime:'145',
                        badProductName:'100',
                        planedNumber:'100',
                        reportNumber:'70',
                        goodProductNumber:'70',
                        badProductNumber:'70',
                        rate:'70'
                    }
                    let width = key[item.name] ?? '180'
                    if (item.state) {
                        this.tableGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            width
                        })
                    }
                    this.disposeGroup.push({
                        label: item.name,
                        name: item.chineseName,
                        state: item.state
                    })
                })
            }
        },
        //监视复选框值变化
        handleChangeDiposeGroup(disposeGroup) {
            let configureList = []
            configureList = disposeGroup.map(i => {
                return {
                    name: i.label,
                    chineseName: i.name,
                    state: i.state
                }
            })
            this.getProductColumns({
                type: 'irregularGather',
                configureList
            }).then(()=>{
                this.$refs.tableList.changeLayout() //防止改变table列配置出现抖动
            })
        },
        getTableData(data) {
            this.$refs.tableList.onloadLogin(true)
            badProductDisDetail(data).then(res => {
                if(res.code == 200) {
                    this.tableList = res.data.records
                    this.tableList.map((item, i) => {
                        item.index = (res.data.current - 1) * 10 + (i + 1)
                    })
                    this.$refs.tableList.totalNum(res.data.total)
                }
                this.$refs.tableList.onloadLogin(false)
            })
        },
        //点击查询获取表单数据
        getFormData(val){
            val.page = 1
            this.formDataList.searchForm = val
            this.getTableData(val)
        },
        // 导出
        getBpddExport() {
            this.$refs.tableList.getTableData('不良品项汇总' + new Date().dateFormat('yyyyMMddhhmmss'), '/statistics/bad_product_dis_detail', this.formDataList.searchForm)
        }
    },
}
</script>

<style lang="less" scoped>
.irregularGather {
    overflow: auto;
}
</style>